 // 布局通用样式

// flex布局工具类
.flex {
    display: flex;
  }
  
  .flex-column {
    flex-direction: column;
  }
  
  .flex-wrap {
    flex-wrap: wrap;
  }
  
  .items-center {
    align-items: center;
  }
  
  .justify-between {
    justify-content: space-between;
  }
  
  .justify-center {
    justify-content: center;
  }
  
  // 间距工具类
  .m-4 {
    margin: 16px;
  }
  
  .mt-4 {
    margin-top: 16px;
  }
  
  .mb-4 {
    margin-bottom: 16px;
  }
  
  .mx-4 {
    margin-left: 16px;
    margin-right: 16px;
  }
  
  .my-4 {
    margin-top: 16px;
    margin-bottom: 16px;
  }
  
  .p-4 {
    padding: 16px;
  }
  
  .pt-4 {
    padding-top: 16px;
  }
  
  .pb-4 {
    padding-bottom: 16px;
  }
  
  .px-4 {
    padding-left: 16px;
    padding-right: 16px;
  }
  
  .py-4 {
    padding-top: 16px;
    padding-bottom: 16px;
  }
  
  // 文本对齐
  .text-left {
    text-align: left;
  }
  
  .text-center {
    text-align: center;
  }
  
  .text-right {
    text-align: right;
  }
  
  // 定位
  .relative {
    position: relative;
  }
  
  .absolute {
    position: absolute;
  }
  
  // 宽度工具类
  .w-full {
    width: 100%;
  }
  
  .h-full {
    height: 100%;
  }